<template>
    <div class="main-page">
        <el-row>
            <el-col><span class="class_title">班级学员</span></el-col>
            <el-col><span class="class_stu_total">总数:{{classInfo.totalStus}}</span></el-col>
            <el-col>
                <span class="el-dropdown-link">
          <i class="el-icon-edit-outline" style="color:white"></i>
      </span>
            </el-col>
        </el-row>
        <el-form :model="formData" ref="formData"
                 size="mini" class="demo-form-inline">
            <el-row type="flex" justify="start">
                <el-col>
                    <span class="search_key">学生名称</span>
                </el-col>
                <el-col>
                    <el-input suffix-icon="el-icon-search" class="search-input-cls-detail"
                              v-model="formData.keyword" size="mini"
                              placeholder="必填" @change="initData"></el-input>

                </el-col>
                <el-col>
                    <i @click="openStuPanel" class="el-icon-circle-plus" style="color:#359DFF"></i>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="margin-top: 10px">
            <el-table :show-header="false" :data="userList">
                <el-table-column
                    property="uid"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-row>
                            <el-col :offset="1" :span="3">{{scope.row.id}}</el-col>
                            <el-col :offset="1" :span="10">{{scope.row.name}}</el-col>
                            <el-col :offset="1" :span="3"><i class="el-icon-edit-outline" style="color:#359DFF"></i>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-dialog title="提示"
                   :visible.sync="ModifyDialogVisible"
        >
            <add-student :childForm="userForm" operType="modify" :stuid="this.modifystuid"></add-student>
            <template slot="footer">
                <el-row v-show="isAdd" type="flex" justify="end">
                    <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                    <el-button @click="panelModifyUser" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>
        </el-dialog>
    </div>

</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import addStudent from '@/page/addStudent'
    import {queryStusApi, addStuApi, updateStuApi} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: "clsDetailStus",
        watch: {
            'cid': function () {
                // initData();

            },
        },
        data() {
            return {
                classInfo: {totalStus: 7},
                cid: null,
                loading: false,
                formData: {keyword: ''},
                userList: [{id: 1, name: "同学1"}, {id: 2, name: "同学2"}, {id: 2, name: "同学2"}, {
                    id: 2,
                    name: "同学2"
                }, {id: 2, name: "同学2"}],
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStudent,

        },
        computed: {
            ...mapGetters(['adminInfo'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),

            clearpanel: function () {
                this.userForm = {};
                this.contractForm = {};
                this.addActive = 0;
                this.isAdd = true;
            },
            closepanel: function (data) {
                this.AddDialogVisible = false;
                this.clearpanel();
            },
            //打开修改用户弹框
            async modifyUser(id) {
                this.modifystuid = id;
                this.ModifyDialogVisible = true;
                const res = await stuDetailAPi({data: {id: id}});
                if (res.success == true) {


                } else {

                }


            },
            closeadd: function () {
                this.AddDialogVisible = false;
                this.addForm = {};

            },


            async initData() {
                const res = await queryStusApi({"data": this.formData});
                var list = res.data;
                if (res.success == true) {
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.name = item.name;

                        // userList.push(tableData);
                    });
                }

            },
            addStu: function () {
                this.ModifyDialogVisible = true;

            },


            async panelModifyUser(data) {
                this.userForm = this.$refs.stupanel.childForm;
                var res = null;
                if (this.userForm.sid != null)
                    res = await updateStuApi({"data": this.userForm});
                else
                    res = await addStuApi({data: this.userForm});
                if (res.success == true) {
                    this.ModifyDialogVisible = false;
                    this.initData();
                }
            },
            async childAddContract(data) {

                this.userForm = this.$refs.stupanel.childForm;
                //this.closepanel();
                var form = {"data": this.userForm};
                const res = await addStuApi();
                if (res.success == true) {
                    this.closepanel();
                    this.initData();
                }
            },

            openStuPanel() {
                this.ModifyDialogVisible = true;


            },
            modifyStuPanel(sid) {

            }
        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .search-input-cls-detail {
        width: 150px;
        font-size: 10px;
        padding: 0px 10px;
        font-size: 10px;
        border-radius: 0px;
    }

    .search_key {
        font-size: 10px;
        color: black;
    }

    .stus-input {

    }

    .class_title {
        margin-top: 5px;
        font-size: 12px;
    }

    .class_stu_total {
        margin-top: 5px;
        font-size: 12px;
    }

    .stu-button {
        font-size: 10px;
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 0px;
    }
</style>
